<template>
  <rt-view>
    <rt-form>
      <rt-header>
        <rt-list-header>
          <rt-header-icon slot="icon" icon="rt-base-account" />
          <rt-header-title :sub-title="subTitle" :title="title" />
          <template slot="btn">
            <rt-header-button-group>
              <rt-button
                v-show="insertForm.bbs_article_status === '1'"
                :plain="false"
                icon-name="rt-portal-able"
                @click="publish"
              >
                发布
              </rt-button>
              <rt-button
                v-show="insertForm.bbs_article_status === '2'"
                :plain="false"
                icon-name="rt-base-disable"
                @click="disPublish"
              >
                取消发布
              </rt-button>
              <rt-button icon-name="rt-base-delete" @click="deleteArticle"
                >删除</rt-button
              >
            </rt-header-button-group>
            <rt-button
              v-if="insertForm.bbs_article_status === '1'"
              type="primary"
              icon-name="rt-base-save"
              style="margin-left: 10px"
              @click="goToEdit()"
              >编辑</rt-button
            >
            <rt-button
              type="back"
              icon-name="rt-base-back"
              style="margin-left: 10px"
              @click="backArticleList()"
              >返回</rt-button
            >
          </template>
        </rt-list-header>
      </rt-header>
      <rt-content>
        <rt-card>
          <rt-section icon="rt-base-account" title="基础信息">
            <rt-form-wrapper>
              <rt-row :gutter="32">
                <rt-col :span="16">
                  <rt-row :gutter="32">
                    <rt-col :span="16">
                      <rt-form-item label="文章标题">
                        <rt-input
                          v-model="insertForm.name"
                          readonly="readonly"
                        />
                      </rt-form-item>
                    </rt-col>
                    <rt-col :span="8">
                      <rt-form-item label="文章分类">
                        <rt-input
                          v-model="insertForm.bbs_article_typeidname"
                          readonly="readonly"
                        />
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="32">
                    <rt-col :span="6">
                      <rt-form-item label="发布时间">
                        <rt-input
                          v-model="insertForm.releasedon"
                          readonly="readonly"
                        />
                      </rt-form-item>
                    </rt-col>
                    <rt-col :span="4">
                      &nbsp;
                    </rt-col>
                    <rt-col :span="6">
                      <rt-form-item>
                        <div>
                          <el-checkbox
                            v-model="insertForm.is_recommend"
                            disabled
                            >推荐</el-checkbox
                          >
                        </div>
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                </rt-col>
                <rt-col :span="8">
                  <rt-form-item label="封面图" prop="file">
                    <el-image
                      :src="insertForm.avatar"
                      :preview-src-list="fileList"
                      style="width: 120px; height: 120px"
                    >
                      <div slot="error">
                        <el-image
                          :src="require('../../assets/imgs/noimg.png')"
                          fit="cover"
                          style="width: 120px; height: 120px"
                        />
                      </div>
                    </el-image>
                  </rt-form-item>
                </rt-col>
              </rt-row>
            </rt-form-wrapper>
          </rt-section>
        </rt-card>
        <rt-card>
          <rt-section>
            <div style="margin-bottom: 20px;margin-top: 20px">
              <span>文章正文</span>
              <div
                style="line-height:30px;margin-top: 50px"
                v-html="insertForm.content"
              />
            </div>
          </rt-section>
        </rt-card>
      </rt-content>
    </rt-form>
  </rt-view>
</template>

<script>
import RtCard from 'vue-xpc/src/components/card/rtCard';
import RtSection from 'vue-xpc/src/components/section/rtSection';
import RtRow from 'vue-xpc/src/components/row/rtRow';
import util from '../../libs/util';
export default {
  name: 'ArticleDetail',
  components: { RtRow, RtSection, RtCard },
  data() {
    return {
      fileList: [],
      isDisable: true,
      //判断添加还是更新
      addAndUpdate: false,
      id: '',
      title: '',
      subTitle: '',
      insertForm: {
        avatar: '',
        name: '',
        is_recommend: false,
        releasedon: '',
        content: '',
        bbs_article_status: '',
        bbs_article_typeidname: ''
      }
    };
  },
  mounted() {
    this.addAndUpdate = this.$route.query.addAndUpdate;
    this.id = this.$route.query.id;
    if (this.id != null && this.id !== '') {
      this.getArticleById(this.id);
    }
  },
  methods: {
    getArticleById(id) {
      rt.get('/api/bbs/article/detail/' + id).then(res => {
        this.insertForm = res;
        this.title = res.name;
        this.fileList = [util.showRemotePic(res.avatar)];
        this.insertForm.avatar = util.showRemotePic(res.avatar);
        this.subTitle = res.bbs_article_statusname;
        this.insertForm.releasedon =
          res.releasedon === null
            ? res.releasedon
            : this.$moment(res.releasedon).format('YYYY-MM-DD HH:mm');
      });
    },
    //点击进入编辑页
    goToEdit() {
      this.$router.replace({
        name: 'bbsarticleedit',
        query: { addAndUpdate: true, id: this.id }
      });
    },
    //发布
    publish() {
      const data = {
        bbs_articleid: this.id,
        bbs_article_status: 2
      };
      rt.post('api/bbs/article/publishordispublish', data)
        .then(res => {
          if (res.ErrorCode === 0) {
            rt.showSuccessToast('发布成功');
            //this.$router.push({ path: '/article/list' });
            this.getArticleById(this.id);
          }
        })
        .catch(error => {
          rt.showErrorToast(error);
        });
    },
    //取消发布
    disPublish() {
      const data = {
        bbs_articleid: this.id,
        bbs_article_status: 1
      };
      rt.post('api/bbs/article/publishordispublish', data)
        .then(res => {
          if (res.ErrorCode === 0) {
            rt.showSuccessToast('取消发布成功');
            //this.$router.push({ path: '/article/list' });
            this.getArticleById(this.id);
          }
        })
        .catch(error => {
          rt.showErrorToast(error);
        });
    },
    //删除
    deleteArticle() {
      this.$confirm('确定要删除该文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.insertForm.bbs_article_status === '2') {
            rt.showErrorToast('已发布文章不能删除');
            return;
          }
          const idList = [];
          idList.push(this.id);
          rt.post('/api/bbs/article/delete', idList)
            .then(res => {
              if (res.ErrorCode === 0) {
                rt.showSuccessToast('成功');
                this.$router.push({ path: '/article/list' });
              }
            })
            .catch(error => {
              rt.showErrorToast(error);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    //返回
    backArticleList() {
      this.$router.back();
    }
  }
};
</script>

<style scoped></style>
